<template>
  <svg :class="svgClass" :width="size" :height="size" aria-hidden="true">
    <use :xlink:href="symbolId" :fill="`${color}`" />
  </svg>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

interface IProps {
  /** svg 的图标的名称 */
  iconName: string
  color: string
  className: string
  size: string
}
const props = defineProps<IProps>()
const symbolId = computed(() => `#icon-${props.iconName}`)
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`
  }
  return 'svg-icon'
})
</script>
<style scoped>
.svg-icon {
  overflow: hidden;
  vertical-align: -3px;
  fill: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
svg {
  fill: red !important;
}
</style>
